<template>
    <div>
        <!-- <h1>我是日更主页面</h1> -->
        <div class="contaniner_box">
            <ul>
                <li v-for="item in dailyCats" :key="item.id" @click="goDetailPath(item.id)">
                    <div class="box_detail">
                        <div class="bg_box">
                            <div class="bg_text">
                                <div class="text_type" v-if="item.id==1">
                                    <span>猫历</span>
                                </div>
                                <div class="text_date">
                                    <div class="text_day">
                                        <span>{{item.imageDataDay}}</span>
                                    </div>
                                    <div class="text_time">
                                        <span class="time_top">{{item.imageDataMonth}}</span>
                                        <span class="time_bottom">{{item.imageDay}}</span>
                                    </div>
                                </div>
                                <div class="text_title nameEllipsis" v-if="item.id!=1">
                                    {{item.imageTitle}}
                                </div>
                            </div>
                            <img :src="item.imageUrl" alt="">
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Daily",
        data() {
            return {
                dailyCats: []
            }
        },
        created() {
            this.getData();
            console.log(this.$route.meta.keepAlive);
            console.log("created")
        },
        mounted() {
            // window.addEventListener('scroll', this.handleScroll)
        },
        activated() {
            console.log("activated")
        },
        deactivated() {
            console.log("deactivated")
        },
        methods: {
            getData() {
                var _self = this; //确保下面使用ajax时候this指向正确
                this.$http.get('https://www.easy-mock.com/mock/5b19f530b97c8172c435c38b/dailyCats/mock').then(function(r) {
                    _self.dailyCats = r.data.data.data;
                    console.log(r)
                }).catch(function(e) {})
            },
            goDetailPath(this_id) {
                this.$router.push({
                    name: 'DailyDetail',
                    params: {
                        id: this_id
                    }
                })
            },
            handleScroll() {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                console.log(scrollTop)
            },
        },
    }
</script>

<style lang="less" scoped>
    ul {
        padding: .2rem;
    }
    li {
        // height: 5rem;
        width: 100%;
        border: 1px solid #eeeeee;
        background-color: #fff;
        color: #5c5c5c;
        margin-bottom: .2rem;
        .bg_box {
            padding: .2rem .3rem;
            display: flex;
            justify-content: space-between;
            img {
                height: 3rem;
                width: 3rem;
            }
            .bg_text {
                padding-top: .3rem;
                .text_title {
                    width: 3.5rem;
                    ;
                }
            }
            .text_date {
                display: flex;
                .text_day {
                    font-weight: bolder;
                    font-size: 1rem; // margin-bottom: .1rem;
                    margin-right: .1rem;
                    margin-top: -.3rem;
                }
                .text_time {
                    display: flex;
                    flex-direction: column; // font-size: .16rem;
                }
            }
        }
    }
    li:first-child {
        height: auto;
        width: 100%;
        color: #fff;
        border: none;
        margin-bottom: .6rem;
        img {
            width: 100%;
            height: 6rem;
        }
        .bg_box {
            padding: 0;
            position: relative;
        }
        .bg_text {
            position: absolute;
            padding-top: 0;
            padding-left: .2rem;
            left: 0;
            bottom: 0;
            .text_type {
                margin-bottom: .2rem;
            }
            .text_type span {
                background-color: #d99d9c;
                text-align: center;
                padding: 0 .2rem;
            }
            .text_date {
                display: flex;
                .text_day {
                    font-weight: bolder;
                    font-size: 1rem; // margin-bottom: .1rem;
                    margin-right: .1rem;
                    margin-top: -.3rem;
                }
                .text_time {
                    display: flex;
                    flex-direction: column; // font-size: .16rem;
                }
            }
        }
    }
</style>


